<%@ page language="java" contentType="text/html; charset=UTF-8"   pageEncoding="UTF-8"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登录界面</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">

	 $(function() {
			$('#login').click(function() {
				var name_state = $('#name');
				var psd_state = $('#psd');
				var name = $('#name').val();
				var psd = $('#psd').val();
				if (name == '') {
					name_state.parent().next().next().css("display", "block");
					return false;
				} else if (psd == '') {
					name_state.parent().next().next().css("display", "none");
					psd_state.parent().next().next().css("display", "block");
					return false;
				} else {
					name_state.parent().next().next().css("display", "none");
					psd_state.parent().next().next().css("display", "none");
					$('.login').submit();
				}
			});
			$('#register').click(function() {
				var name_r_state = $('#name_r');
				var psd_r_state = $('#psd_r');
				var affirm_psd_state = $('#affirm_psd');
				var name_r = $('#name_r').val();
				var psd_r = $('#psd_r').val();
				var affirm_psd = $('#affirm_psd').val();
				if (name_r == '') {
					name_r_state.parent().next().next().css("display", "block");
					return false;
				} else if (psd_r == '') {
					psd_r_state.parent().next().next().css("display", "block");
					return false;
				} else if (affirm_psd == '') {
					affirm_psd_state.parent().next().next().css("display", "block");
					return false;
				} else if (psd_r != affirm_psd) {
					return false;
				} else {
					$('.register').submit();
				}
			})
		})

		function ok_or_errorBylogin(l) {
			var content = $(l).val();
			if (content != "") {
				$(l).parent().next().next().css("display", "none");
			}
		}

		function ok_or_errorByRegister(r) {
			var affirm_psd = $("#affirm_psd");
			var psd_r = $("#psd_r");
			var affirm_psd_v = $("#affirm_psd").val();
			var psd_r_v = $("#psd_r").val();
			var content = $(r).val();
			if (content == "") {
				$(r).parent().next().next().css("display", "block");
				return false;
			} else {
				$(r).parent().next().css("display", "block");
				$(r).parent().next().next().css("display", "none");
				if (psd_r_v == "") {
					$(psd_r).parent().next().css("display", "none");
					$(psd_r).parent().next().next().css("display", "none");
					$(psd_r).parent().next().next().css("display", "block");
					return false;
				}
				if (affirm_psd_v == "") {
					$(affirm_psd_v).parent().next().css("display", "none");
					$(affirm_psd_v).parent().next().next().css("display", "none");
					$(affirm_psd_v).parent().next().next().css("display", "block");
					return false;
				}
				if (psd_r_v == affirm_psd_v) {
					$(affirm_psd).parent().next().css("display", "none");
					$(affirm_psd).parent().next().next().css("display", "none");
					$(psd_r).parent().next().css("display", "none");
					$(psd_r).parent().next().next().css("display", "none");
					$(affirm_psd).parent().next().css("display", "block");
					$(psd_r).parent().next().css("display", "block");
				} else {
					$(affirm_psd).parent().next().css("display", "none");
					$(affirm_psd).parent().next().next().css("display", "none");
					$(psd_r).parent().next().css("display", "none");
					$(psd_r).parent().next().next().css("display", "none");
					$(psd_r).parent().next().css("display", "block");
					$(affirm_psd).parent().next().next().css("display", "block");
					return false;
				}
			}
		}

		function barter_btn(bb) {
			$(bb).parent().parent().fadeOut(1000);
			$(bb).parent().parent().siblings().fadeIn(2000);
		}
		
		
		 var userflag = false;
		 var passflag = false;
		 var rpassflag = false;
		 var emailflag = false;

			$(function(){		
				
				$("#name").blur(function(e){					
					if($("#name").val()==null || $("#name").val()==""){						
							$("#msg").text("用户名不能为空");
						userflag = true;
					}else{						
						$.ajax({
							url:"user/checkuser",
							data:"name="+$("#name").val(),
							type:'post',
							success: function(msg){																								
								if(msg.code==500){			
									$("#msg").text(msg.msg);
									userflag = false;
								}else if(msg.code==200){		
									$("#msg").text(msg.msg);
									userflag = true;
								}
							}
						});
					}																	
			});		
				$("#psd").blur(function(e){
					
					if($("#psd").val()==null || $("#psd").val()==""){
						
						$("#passmsg").text("密码不能为空");	
						 passflag = false;					
						
					}else{
						
						$("#passmsg").text("");	
						 passflag = true;
					}
																				
				});	
				
				$("#name_r").blur(function(e){					
					if($("#name_r").val()==null || $("#name_r").val()==""){						
							$("#accountmsg").text("用户名不能为空");
						userflag = true;
					}else{						
						$.ajax({
							url:"checkaccount",
							data:"accountname="+$("#accountname").val(),
							type:'post',
							success: function(msg){																								
								if(msg.code==500){			
									$("#accountmsg").text(msg.msg);
									userflag = false;
								}else if(msg.code==200){		
									$("#accountmsg").text(msg.msg);
									userflag = true;
								}
							}
						});
					}																	
			});		
				$("#psd_r").blur(function(e){	
					if($("#psd_r").val()==null || $("#psd_r").val()==""){			
						$("#accountpassmsg").text("密码不能为空");		
						rpassflag = false;					
					}else if($("#psd_r").val()==$("#psd_r").val()){
						$("#accountpassmsg").text("");	
						rpassflag = true;
					}																	
				});	
				
				$("#email").blur(function(e){
					
					var filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
					
					if($("#email").val()==null || $("#email").val()==""){
						
						$("#emailmsg").text("邮箱不能为空");		
						emailflag = false;				
						
					}else if(!filter.test($("#email").val())){
						
						$("#emailmsg").text("邮箱格式不正确");	
						emailflag = false;
					}else{
						$("#emailmsg").text("");
						emailflag = true;		
					}
				   });															
				});	
</script>
</head>

<body class="login_body">

<div class="login_div">
	<div class="col-xs-12 login_title">车贷管理系统后台登陆</div>
	<form action="/login" class="login" method="post">
		<div class="nav">
			<div class="nav login_nav">
				<div class="col-xs-4 login_username">
					用户名:
				</div>
				<div class="col-xs-6 login_usernameInput">
					<input type="text" name="name" id="name" value="" placeholder="&nbsp;&nbsp;用户名/手机号"  onblur="javascript:ok_or_errorBylogin(this)" />
					<span style="color:red" id="msg"></span>
				</div>

			</div>
			<div class="nav login_psdNav">
				<div class="col-xs-4">
					密&nbsp;&nbsp;&nbsp;码:
				</div>
				<div class="col-xs-6">
					<input type="password" name="password" id="psd" value="" placeholder="&nbsp;&nbsp;密码" onBlur="javascript:ok_or_errorBylogin(this)" />
					<span style="color:red" id="passmsg"></span>
				</div>

			</div>
			<div class="choose_user">
				<select name="choose" class="choose">
                      <option value="admin">管理员</option>
                      <option value="manager">经理</option>
                      <option value="account">用户</option>
                </select>
			</div>
			<div class="col-xs-12 login_btn_div">
				<input type="submit" class="sub_btn" value="登录" id="login" />
			</div>
			<div>${msg}</div>
		</div>
	</form>

	<div class="col-xs-12 barter_btnDiv">
		<button class="barter_btn" onClick="javascript:barter_btn(this)">没有账号?前往注册</button>
	</div>
</div>

<div class="register_body">
	<div class="col-xs-12 register_title">注册</div>
	<form action="/register" class="register" method="post">
		<div class="nav">
			<div class="nav register_nav">
				<div class="col-xs-4">
					用户名:
				</div>
				<div class="col-xs-6">
					<input type="text" name="accountname" id="name_r" value="" placeholder="&nbsp;&nbsp;用户名" onBlur="javascript:ok_or_errorByRegister(this)" />
					<span style="color:red" id="accountmsg"></span>
				</div>

			</div>
			<div class="nav register_psdnav">
				<div class="col-xs-4">
					密&nbsp;&nbsp;&nbsp;码:
				</div>
				<div class="col-xs-6">
					<input type="password" name="accountpassword" id="psd_r" value="" placeholder="&nbsp;&nbsp;密码" onBlur="javascript:ok_or_errorByRegister(this)" />
					<span style="color:red" id="accountpassmsg"></span>
				</div>
	
			</div>
			<div class="nav register_affirm">
				<div class="col-xs-4">
					电&nbsp;&nbsp;&nbsp;话:
				</div>
				<div class="col-xs-6">
					<input type="text" name="accountphone" id="affirm_psd" value="" placeholder="&nbsp;&nbsp;客户电话" onBlur="javascript:ok_or_errorByRegister(this)" />
					<!-- <span style="color:red" id="passmsg"></span> -->
				</div>
			</div>
			<div class="nav register_affirm">
			<input type="hidden" name="roleid" value="2">
				<!-- <div class="col-xs-4">
					类&nbsp;&nbsp;&nbsp;型:
				</div>
				<div class="col-xs-6">
					<input type="accounttype" name="accounttype" id="affirm_psd" value="" placeholder="&nbsp;&nbsp;客户类型" onBlur="javascript:ok_or_errorByRegister(this)" />
					<span style="color:red" id="passmsg"></span>
					
					<select name="roleid" class="choose">
	                      <option value="2">用户</option>
	                </select>
				</div> -->
			</div>
			<div class="col-xs-12 register_btn_div">
				<input type="submit" class="sub_btn" value="注册" />
				<!-- <input type="submit" class="sub_btn" value="zhuce"> -->
			</div>
		</div>
	</form>
	<div class="col-xs-12 barter_register">
		<button class="barter_registerBtn" onClick="javascript:barter_btn(this)" style="">已有秘籍?返回登录</button>
	</div>
</div>
<div style="text-align:center;">
</div>

</body>
</html>